<!--商品分类组件-->
<template>
	<div>
		<!--上边内容-->
		<div class="fat">
			<p class="fat_p">
				<span>您的当前位置 :</span>
				<span>首页 ></span>
				<span>	全部商品 ></span>
				<span>苹果 ></span>
				<span>阿克苏</span>
			</p>
			<div class="cont">
				<ul>
					<span>一级分类 : </span>
					<li>全部</li>
					<li>苹果</li>
					<li>阿克苏</li>
					<li>酒店</li>
					<li>休闲</li>
					<li>电影</li>
				</ul>
				<ul>
					<span>一级分类 : </span>
					<li>全部</li>
					<li>苹果</li>
					<li>阿克苏</li>
					<li>酒店</li>
					<li>休闲</li>
					<li>电影</li>
				</ul>		
			</div>
			<div class="BigCont">
				<ul class="BigCont_ul_1">
					<span>排序 :</span>
					<li>销量</li>
					<li>价格</li>
					<li>评分最高</li>
				</ul>
				<ul class="BigCont_ul_2">
					<span>筛选 :</span>
					<li>全国</li>
					<li>次日到</li>
				</ul>		
			</div>		
		</div>
		<!--下边内容-->
		<div class="Countent">
			<div v-for='item in objArr' class="Countent_img">
				<div class="one">
					<p>{{item.title}}</p>
					<em class="two">{{item.titleL}}</em>
					<p>
						<span>{{item.price}}</span>
						<span>{{item.oldprice}}</span>
					</p>					
				</div>				
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'GoodsClass',
		data:function(){
			return {
				objArr:[{
					title:'新西兰佳沛黄金奇异果',titleL:'果肉绵密、花蜜般的甘甜百吃不厌' ,price:'¥28.80',oldprice:'¥68.80'
				},{
					title:'新西兰佳沛黄金奇异果',titleL:'果肉绵密、花蜜般的甘甜百吃不厌' ,price:'¥28.80',oldprice:'¥68.80'
				},{
					title:'新西兰佳沛黄金奇异果',titleL:'果肉绵密、花蜜般的甘甜百吃不厌' ,price:'¥28.80',oldprice:'¥68.80'
				},{
					title:'新西兰佳沛黄金奇异果',titleL:'果肉绵密、花蜜般的甘甜百吃不厌' ,price:'¥28.80',oldprice:'¥68.80'
				},{
					title:'新西兰佳沛黄金奇异果',titleL:'果肉绵密、花蜜般的甘甜百吃不厌' ,price:'¥28.80',oldprice:'¥68.80'
				},{
					title:'新西兰佳沛黄金奇异果',titleL:'果肉绵密、花蜜般的甘甜百吃不厌' ,price:'¥28.80',oldprice:'¥68.80'
				},{
					title:'新西兰佳沛黄金奇异果',titleL:'果肉绵密、花蜜般的甘甜百吃不厌' ,price:'¥28.80',oldprice:'¥68.80'
				},{
					title:'新西兰佳沛黄金奇异果',titleL:'果肉绵密、花蜜般的甘甜百吃不厌' ,price:'¥28.80',oldprice:'¥68.80'
				}]
			}
		}
	}
</script>

<style scoped>
	.fat{
		width: 1280px;
		height:220px;
		margin: auto;
		/*background: yellow;*/
	}
		/*一级分类*/
	.fat_p{
		width: 1280px;
		height: 54px;
		line-height: 54px;
		font-size: 15px;
		background: #f4f4f4;
		margin: auto;
		padding-left: 20px;
	}
	.fat_p span{
		margin-right: 20px;
	}
	.cont ul{
		width: 1280px;
		height: 56px;
		line-height: 56px;
		font-size: 15px;
		margin: auto;
		border-bottom: 1px solid #e7e7e7;
	}
	.cont ul li{
		display: inline-block;
		margin-right: 30px;
	}
	.cont span{
		margin-right: 26px;
	}
	/*销量 排序等*/
	.BigCont{
		width: 1280px;
		margin:-40px auto;
		overflow: hidden;
	}
	.BigCont_ul_1{
		width: 430px;
		padding-top: 20px;
		padding-bottom: 20px;
		margin-top:40px;
		font-size: 15px;
		float: left;
	}
	.BigCont_ul_1  li{
		width: 62px;
		line-height: 24px;
		border: 1px solid #e7e7e7;
		display: inline-block;
		margin-right: 40px;
		text-align: center;
	}	
	.BigCont_ul_1 span{
		margin-right: 59px;
	}
	.BigCont_ul_2{
		float: right;
		width: 430px;
		padding-top: 62px;
		padding-bottom: 20px;		
		text-align: right;
		font-size: 15px;	
	}
	.BigCont_ul_2 li{
		width: 64px;
		height: 26px;
		line-height: 26px;
		/*background: green;*/
		text-align: center;
		display: inline-block;
		margin-left: 40px;
	}
	/*中间图片内容*/
	.Countent{	
		width: 1280px;
		/*background: green;*/
		margin:0 auto;
		font-size: 0;
		padding-left: 0px;
		padding-right: 0px;
		margin-bottom: 20px;
	}
.Countent_img{
		width:280px;
		height: 400px;
		display: inline-block;
		background:url(../../assets/image/0125.png) no-repeat;
		margin-left: 10px;
		margin-right: 30px;
		margin-top: 20px;	
	}
	.Countent_img p{
		height: 5px;
		font-size: 17px;
		text-align: center;
		margin-bottom: 30px;
	}
	.Countent_img span{
		margin-right: 10px;
	}
	.one{
		margin-top: 300px;
	}
	.two{
		font-size: 12px;
		color: darkgray;
		font-style: normal;
		padding-left: 50px;
		margin-top: 10px;
	}
</style>